import React, { Component } from 'react';
import { Select, Input, Space, Table, Switch, Button } from 'antd';
import axios from 'axios'

const { Search } = Input;



const { Option } = Select;


let changevalue = (record) => {


}


class Goods_classfily extends Component {
    state = {
        date: [],
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                align: "center",
                width: "70px"
            },
            {
                title: '分类图标',
                dataIndex: '',
                key: 'img',
                align: "center",
                width: "160px",
                render: (record) => <img src={record.img} alt='' style={{ width: "50px", height: "50px" }} />
            },
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
                align: "center",
            },
            {
                title: '类型',
                dataIndex: 'type',
                key: 'type',
                align: "center",
                width: "90px"
            },

            {
                title: '排序',
                dataIndex: 'sort',
                key: 'sort',
                align: "center"
            },
            {
                title: '状态',
                dataIndex: 'sate',
                key: 'sate',
                align: "center",
                render: () => <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked />
            },
            {
                title: '操作',
                align: "center",
                render: (record) => <div className='operate'>
                    <Button onClick={() => this.btndel(record)}>删除</Button>
                </div>
            }
        ]
    }
    componentDidMount() {
        this.getdata()
    }
    //获取全部数据
    getdata = () => {
        axios.get('/classify').then(res => {

            this.setState({
                date: res.data.data
            })
        })
    }
    handleChange = (value) => {
        axios.get(`/classifysearch?sou=${value}`).then(res => {
            this.setState({
                date: res.data.data
            })
        })
    }
    //搜索
    onSearch = (value) => {

        axios.get(`/classifysearch?name=${value}`).then(res => {

            if (res.data.code === 200) {
                this.setState({
                    date: res.data.data
                })
            }
        })
    }

    //删除
    btndel = (record) => {
        axios.get(`/classdetile?id=${record.id}`).then(res => {

            if (res.data.code === 200) {
                this.getdata()
            }
        })
    }

    render() {
        return (
            <div className='classify'>
                <div className='classify_sel'>
                    <span>状态：</span>
                    <Select defaultValue="全部" style={{ width: 120 }} onChange={this.handleChange} >
                        <Option value="显示">显示</Option>
                        <Option value="不显示">不显示</Option>
                    </Select>
                    <span>名称：</span>
                    <Space direction="vertical">
                        <Search placeholder="请输入名称" onSearch={this.onSearch} style={{ width: 200 }} />
                    </Space>
                </div>
                <div className='classify_ad'>
                </div>

                <div className='classify_lis'>
                    <Table dataSource={this.state.date} scroll={{ y: 540 }} columns={this.state.columns} rowKey="id" />
                </div>
            </div>
        );
    }
}

export default Goods_classfily;
